<!-- 字典类型 -->
<template>
  <div class="container">
    <el-page-header @back="goBack" content="字典管理" style="padding-bottom:20px"></el-page-header>
    <!-- 控件 -->
    <div class="controlBox">
      <el-form ref="form" :inline="true" :model="search" label-width="80px" size="mini">
        <el-form-item label="字典名称">
          <el-input v-model="search.dictName" placeholder="请输入字典名称"></el-input>
        </el-form-item>
        <el-form-item label="字典标签">
          <el-input v-model="search.dictTag" placeholder="请输入字典标签"></el-input>
        </el-form-item>
        <el-form-item label="字典状态">
          <el-select v-model="search.status" placeholder="请选择字典状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDictLTypeListFun">搜 索</el-button>
        </el-form-item>
      </el-form>
      <el-button
        slot="reference"
        type="primary"
        size="mini"
        @click="centerDialogVisible = true"
      >+ 添加</el-button>
      <el-dialog title :visible.sync="centerDialogVisible" width="40%" center>
        <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px">
          <el-form-item label="字典名称">
            <el-input v-model="propsData.dictName" disabled />
          </el-form-item>
          <el-form-item label="数据标签" prop="Tag">
            <el-input v-model="form.dictTag" />
          </el-form-item>
          <el-form-item label="数据键值" prop="keyValue">
            <el-input v-model="form.keyValue" />
          </el-form-item>
          <el-form-item label="显示排序" prop="keyValue">
            <el-input-number
              v-model="form.dictSort"
              controls-position="right"
              @change="handleChange"
              :min="1"
              :max="10"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="字典状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="正常" value="0"></el-radio>
              <el-radio label="停用" value="1"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('form')">提 交</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      height="700px"
      :header-cell-style="{background:'#efefef'}"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" width />
      <el-table-column prop="label" label="字典标签" width />
      <el-table-column prop="value" label="字典键值" width />
      <el-table-column prop="sort" label="字典排序" width />
      <el-table-column prop="state" label="状态" width />
      <el-table-column prop="date" label="创建日期" width />
      <el-table-column prop="remark" label="备注" width />
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            style="color:#f56c6c"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          >移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="controlBox"
      style="margin-top:20px"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    ></el-pagination>
  </div>
</template>

<script>
import { getDictLTypeList, getDictLType,addDictType } from "@/api/user";
export default {
  components: {},
  data() {
    return {
      centerDialogVisible: false,
      currentPage: 1, //  初始页
      pagesize: 10, //  每页的数据
      total:0,   //总条数
      propsData: "",
      search: {
        dictName: "",
        dictTag: "",
        status: '',
      },
      form: {
        dictName: "",
        dictTag: "",
        dictSort: "",
        status: "",
        remark: "",
      },
      rules: {
        id: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { required: true,pattern: "^[0-9]{2}$",message: "请输入正确的账号，账号位2位数字",trigger: "blur"},
        ],
        name: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" },
        ],
        phoneNum: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { required: true,pattern: "^1[3456789]\\d{9}$",message: "请输入正确的联系电话",trigger: "blur"},
        ],
        remark: [{ required: true, message: "请填写备注", trigger: "blur" }],
        dictName: [
          { required: true, message: "字典名称不能为空", trigger: "blur" },
        ],
        dictType: [
          { required: true, message: "字典类型不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输密码", trigger: "blur" },
          { required: true,pattern: "^[A-Za-z0-9]{6,8}$",message: "密码为6~8位数字和字母",trigger: "blur",},
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      tableData: [
        {
          id: "1",
          date: "2016-05-03",
          tag: "标签",
          sort: "0",
          keyValue: "0",
          state: "正常",
          remark: "要你管",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.data) {
      this.propsData = JSON.parse(this.$route.query.data);
      // console.log(this.$route.query.data);
    }

    this.getTypeValueFun();
  },
  mounted() {},
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    goBack(){
      this.$router.push({ name: "dictManagement" });
    },
    handleChange(num) {
      this.form.dictSort = num;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addDictType(
            this.form.dictSort,
            this.form.dictTag,
            this.form.keyValue,
            this.propsData.dictId,
            this.form.status == '正常' ? 0 : 1,
            this.form.remark
          ).then(res=>{
            if(res.code == 2000){
              this.$message({
                message: '恭喜你，添加成功',
                type: 'success'
              });
              this.form = {
                dictName: "",
                dictTag: "",
                dictSort: "",
                status: "",
                remark: "",
              },
              this.getDictLTypeListFun()
              this.centerDialogVisible = true;
            }
           
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    //获取列表
    getDictLTypeListFun() {
      getDictLTypeList(
        this.search.dictName,
        this.search.dictTag,
        this.search.status
      ).then((res) => {
        console.log(res.data);
        if(res.code == 2000){
          this.tableData = res.data.dictDatas
        }
      });
    },
    //获取类型值
    getTypeValueFun() {
      getDictLType(this.propsData.dictType).then((res) => {
        if(res.code == 2000){
          this.tableData = res.data.dictDatas
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  padding: 20px;
  .controlBox {
    padding-bottom: 20px;
  }
}
</style>
